import React from 'react'
import {inject,observer} from 'mobx-react'
import RankStore from '../../../../../store/modules/rankStore'
import {Link} from 'react-router-dom'
import PubSub from 'pubsub-js'
interface IProps {
    itemInfo: any,
    rankStore?: RankStore
}
const GuessItem = (props: IProps) => {
    const getRankName = (props: IProps) => {
        const RankId =  props.itemInfo.goodRank
        let rankName = ''
        if(props.rankStore)
        for(let item of props.rankStore.rankInfo){
            if(item.rankId === RankId){
                rankName = item.rankName
                return '入选' + rankName
            }
        }
    }
    const imgLoaded = () => {
        PubSub.publish('rfs')
    }
    return (
        <Link to={{
            pathname: '/detail',
            state: {
                itemInfo: props.itemInfo
            }
        }} >
        <div style={{
            borderRadius: '5px',
            backgroundColor: 'white',
            width: '48vw'
        }}>
            <div style={{
                padding: '1vw'
            }}>
                <img src={props.itemInfo.gcover} alt="封面" loading="lazy" onLoad={imgLoaded} style={{
                    width: '100%'
                }} />
                <div style={{
                    height: '3vh',
                    padding: '0 3vw',
                    lineHeight: '3vh',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    color: '#333',
                    fontSize: '12px'
                }}>
                    {props.itemInfo.gname}
                </div>
                <div style={{
                    height: '3vh',
                    lineHeight: '1vh',
                    padding: '0 3vw',
                    marginTop: '.5vh'
                }}>
                    <div style={{
                        border: '1px solid #666',
                        borderRadius: '3px',
                        padding: '1vw',
                        color: '#666',
                        display: 'inline-block',
                        fontSize: '12px'
                    }}>
                        {props.itemInfo.gmethod}
                    </div>
                </div>
                <div style={{
                    height: '3vh',
                    padding: '0 3vw',
                    lineHeight: '3vh',
                    marginTop: '.5vh',
                    color: '#FF5757'
                }}>
                    ￥{Number(props.itemInfo.gprice).toFixed(2)}
                </div>
            </div>
            {
                    props.itemInfo.goodRank === 0 ? (<></>) :
                        (
                            <div style={{
                                position: 'relative'
                            }}>
                                <img src='/assets/picsrc/desc.png' alt="榜图" loading="lazy" style={{
                                    width: '100%',
                                }} />
                                <div style={{
                                    position: 'absolute',
                                    width: '100%',
                                    height: '2vh',
                                    lineHeight: '2vh',
                                    top: '50%',
                                    left: '50%',
                                    transform: 'translate(-50%,-50%)',
                                    display: 'flex',
                                    justifyContent: 'center'
                                }}>
                                    <img src="/assets/picsrc/descIcon.png" alt="descIcon" style={{
                                        width: '13px',
                                        marginRight: '1vw'
                                    }}/>
                                    <div style={{
                                        fontSize: '13px',
                                        fontWeight: 'bolder'
                                    }}>{getRankName(props)}</div>
                                </div>
                            </div>
                        )
                }
        </div>
        </Link>
    )
}

export default inject('rankStore')(observer(GuessItem))